<template>
  <div>
    <!-- 列表组件 -->
    <list @edit="edit" ref="list"></list>
    <!-- 弹窗组件 -->
    <info :info="info" @close="info.isShow=false" ref="info" @update="update"></info>
  </div>
</template>

<script>
import list from "./list";
import info from "./info";
export default {
  data() {
    return {
      info: {
        // 弹窗是否显示
        isShow: false,
        // 弹窗的标题
        title: ''
      }
    }
  },
  components: {
    list,
    info,
  },
  methods: {
    // 点击添加按钮，打开弹窗
    add() {
      this.info.isShow = true;
      this.info.title = '添加角色';
      let data = {
        rolename: "",
        menus: [],
        status: 1
      };
      // 调用子组件中赋值的方法
      this.$refs.info.setValue(data);
    },
    // 编辑某一项
    edit(data) {
      this.info.isShow = true;
      this.info.title = '修改角色';
      // 调用子组件中赋值的方法
      this.$refs.info.setValue(data);
    },
    // 新增或修改后，通知页面获取新数据
    update() {
      this.$refs.list.getTableData();
    }
  },
};
</script>

<style>
</style>